<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="nav">
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item to="/admin/main">后台首页</el-breadcrumb-item>
          <el-breadcrumb-item>电影管理</el-breadcrumb-item>
          <el-breadcrumb-item to="/admin/film/nowplaying">正在热映</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div @click="showAddFilm">添加热映电影</div>
    </div>
    <el-divider></el-divider>
    <!-- 表格数据的显示 -->
    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="60"> </el-table-column>
        <el-table-column prop="name" label="电影名称" width="180"> </el-table-column>
        <el-table-column prop="director" label="导演" width="180"> </el-table-column>
        <el-table-column label="封面图片" width="200">
          <!-- 作用域插槽 -->
          <template slot-scope="prop">
            <img :src="prop.row.poster" alt="" style="width: 100px" />
          </template>
        </el-table-column>
        <el-table-column prop="category" label="分类" width="180"> </el-table-column>
        <el-table-column prop="nation" label="地区" width="180"> </el-table-column>
        <el-table-column label="上映日期" width="180">
          <template slot-scope="prop">
            <span>{{ prop.row.premiereAt | formatDateStr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时长" width="180">
          <template slot-scope="prop">
            <span>{{ prop.row.runtime }} 分钟</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="prop">
            <!-- 通过自定义指令完成按钮级别的权限控制 -->
            <!-- <el-button v-auth="$route.path" type="primary" style="margin-right: 10px">修改</el-button> -->

            <actionBtn text='修改' />
            <actionBtn type="danger" text='删除' />
            <!-- <el-popconfirm title="您确定删除吗？"> -->
            <!-- 对于当前组件进行2次封装，来完成按钮级别的权限控制 -->
            <!-- <el-button slot="reference" type="danger">删除</el-button> -->
            <!-- </el-popconfirm> -->
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination layout="prev, pager, next" :page-size="2" :total="total" @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>

    <!-- 添加热映电影 -->
    <addFilm :filmFormVisible="filmFormVisible" @onFilmFormVisible="onFilmFormVisible" />
  </div>
</template>

<script>
import addFilm from './ui/addFilm.vue'
import actionBtn from '@/components/actionBtn'
import { getNowPlayingList, getNowPlayingCount } from '@/api/filmApi'
export default {
  components: {
    addFilm,
    actionBtn
  },
  data() {
    return {
      tableData: [],
      // 是否显示添加电影的弹出层
      filmFormVisible: false,
      // 记录数，它会给我们进行计算 Math.ceil(记录数/页码数)  5/2 => 3
      total: 1
    }
  },
  mounted() {
    // 并发请求，两者同时完成才算是真的完成
    // 只在初始化时执行一次
    Promise.all([this.getData(), getNowPlayingCount()]).then(([, pageInfo]) => {
      this.total = pageInfo.data.total
    })
  },
  methods: {
    onFilmFormVisible(status) {
      this.filmFormVisible = status
    },
    async getData(page = 1) {
      let ret = await getNowPlayingList(page)
      this.tableData = ret.data
      return true
    },
    showAddFilm() {
      this.filmFormVisible = true
    },
    // 页码切换时，他会被触发
    handleCurrentChange(page) {
      this.getData(page)
    }
  }
}
</script>

<style lang="scss">
.box-card {
  width: 100%;
}
.el-popper {
  position: absolute;
  background: #fff;
  min-width: 150px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  padding: 12px;
  z-index: 2000;
  color: #606266;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  word-break: break-all;
}
.container {
  .nav {
    display: flex;
    justify-content: space-between;
    > div:nth-of-type(2) {
      font-size: 14px;
      color: rgb(96, 98, 102);
      cursor: pointer;
      &:hover {
        color: red;
      }
    }
  }
}
</style>
